<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>个人信息</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<link rel="stylesheet" type="text/css" th:href="@{/static/common/layui/css/layui.css}" media="all">
	<link rel="stylesheet" type="text/css" th:href="@{/static/common/bootstrap/css/bootstrap.css}" media="all">
	<link rel="stylesheet" type="text/css" th:href="@{/static/common/global.css}" media="all">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/personal.css}" media="all">
</head>
<body>
<input hidden type="text" id="vegetableId" th:value="${obj.id}">
<section class="layui-larry-box">
	<div class="larry-personal">
		<!--<header class="larry-personal-tit">-->
			<!--<span>菜品编辑</span>-->
		<!--</header>&lt;!&ndash; /header &ndash;&gt;-->
		<div class="larry-personal-body clearfix">
			<form class="layui-form col-lg-5" action="" method="post">
				<div class="layui-form-item">
					<label class="layui-form-label">菜品名称</label>
					<div class="layui-input-block">  
						<input type="text" lay-verify="required" th:value="${obj.name}" id="title" placeholder="请输入" name="title" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item" pane="">
					<label class="layui-form-label">菜品配料</label>
					<div class="layui-input-block">
						<input type="checkbox"  th:each="item,stat :${batchingInfos}" th:checked="${item.flag}" th:name="${item.batchingName}" lay-skin="primary" th:value="${item.id}" th:title="${item.batchingName}">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">所属菜系</label>
					<div class="layui-input-block" >
						<input type="radio" name="menu" th:each="item,stat :${menuInfos}" th:checked="${obj.menuId} == ${item.id}" th:value="${item.id}" th:title="${item.name}">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">菜品价格</label>
					<div class="layui-input-block">
						<input type="text" id="price" th:value="${obj.costPrice}" name="price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜品折扣价</label>
					<div class="layui-input-block">
						<input type="text" name="zk_price" th:value="${obj.preferentialPrice}" id="zk_price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜品库存</label>
					<div class="layui-input-block">
						<input type="text" name="count" id="count" th:value="${obj.stock}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">菜品图片</label>
					<div class="layui-input-block">
						<input id="upload" type="file" name="file" class="layui-upload-file">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">图片预览</label>
					<div class="layui-input-inline">
						<img id="image_upload" th:src="${obj.imageUrl}">
					</div>
				</div>



				<div class="layui-form-item layui-form-text">
					<div id="editor" style="width: 1000px" >

					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button id="submit_btn" type="button" class="layui-btn">立即提交</button>
						<button id="clear_btn" type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</section>
<script type="text/javascript" th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
<script type="text/javascript" th:src="@{/static/common/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/wangEditor.min.js}"></script>
<script type="text/javascript">
	layui.use(['form','upload','layedit','jquery','layer'],function(){
        var $ = layui.$;
        var layer = layui.layer;
        //建立编辑器
		var E = window.wangEditor;
		var editor = new E("#editor");
		editor.customConfig.uploadImgShowBase64 = true;
		editor.customConfig.uploadImgMaxSize = 1024*1024;
		editor.customConfig.uploadImgMaxLength = 5;
		// 使用 base64 保存图片
		editor.customConfig.uploadImgShowBase64 = true;
		editor.create();
		 layui.upload({
			 accept: 'images',
			 acceptMime: 'image/*',
			 url: '/management/caipu/file/upload' ,//上传接口
			 before:function(inputObj){
				var size = inputObj.files[0].size;
				if (size > (1*1024*1024)){
				    layer.msg('图片大小不得超过1M',{icon:2});
				    return;
				}
				if (size == 0){
                    layer.msg('图片大小不得为空',{icon:2});
                    return;
				}
			 },
			 success: function(res){
			  //上传成功后的回调
			  if (res.code == 500){
                  layer.alert(res.msg,function(){
                      layer.close(layer.index);
                  })
			  }else {
                  $("#image_upload").attr("src",res.data.src);
                  $("#image_upload").css("width","300px");
                  $("#image_upload").css("height","200px");
			  }
			}
		 });

        $("#submit_btn").on("click",function () {
            //提交按钮
			var id = $("#vegetableId").val();
            var title = $("#title").val();
            var ids = [];
            var imageFile = $("#image_upload").attr("src");
            var price = $("#price").val();
            var zkPrice = $("#zk_price").val();
            var content = editor.txt.html();
            var count = $("#count").val();
            var menuId = $("input[type='radio']:checked").val();
            $("input[type='checkbox']:checked").each(function () {
                var _this = $(this);
                ids.push(_this.val());
            });
			if (ids.length == 0){
                layer.alert("请选择菜品配料", function () {
                    layer.close(layer.index);
                });
			}
			if (menuId == null || menuId == '') {
                layer.alert("请选择菜品分类", function () {
                    layer.close(layer.index);
                });
                window.location.reload();
            }
            $.ajax({
                url:"/management/caipu/update/vegetable",
                data:{
                    'id': id,
                    'content':content,
                    'title': title,
                    'ids':ids,
					'imageFile':imageFile,
					'price':price,
					'zkPrice':zkPrice,
					'count':count,
					'menuId':menuId
                },
                method:'post',
                dataType:'json',
                traditional:true,
                success: function (data) {
                    console.log(data);
                    if (data.code == 500){
                        layer.alert(data.msg, function () {
                            layer.close(layer.index);
                        });
					} else {
                        layer.alert(data.msg, function () {
                            layer.close(layer.index);
                            $(".layui-layer-close1").trigger('click');
                        });
					}
                },
                error:function () {
                    layer.alert("菜品更新失败", function () {
                        layer.close(layer.index);
                    });
                }
            })
        });
	});





</script>
</body>
</html>